<template>
  <div class="nearby">
      <p class="nearby__title">附近商铺</p>
      <ShopDetail v-for="item in nearbyList" :key="item._id" :info="item" :ishide="true" @click="goShopDetail(item._id)" />
    </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ShopDetail from '../../components/ShopDetail.vue'
import { hotShops } from '../../api/detail'

function useHotShopsEffect () {
  const nearbyList = ref([])
  const getHotShopsList = async () => {
    try {
      const res = await hotShops()
      nearbyList.value = res.data
    } catch (error) {
      console.log('请求出错', error)
    }
  }
  return { nearbyList, getHotShopsList }
}

function useShopDetailEffect () {
  const router = useRouter()
  const goShopDetail = (id) => {
    router.push({ path: `/shop/${id}` })
  }
  return { goShopDetail }
}

export default {
  name: 'Nearby',
  components: { ShopDetail },
  setup () {
    const { nearbyList, getHotShopsList } = useHotShopsEffect()
    const { goShopDetail } = useShopDetailEffect()

    getHotShopsList()
    return { nearbyList, goShopDetail }
  }
}
</script>

<style lang="scss" scoped>
.nearby {
    &__title {
      margin: .16rem 0 .02rem 0;
      font-size: .18rem;
      color: #333;
    }
}
</style>
